<template>
  <div
    class="app-wrapper"
    :class="{'hidden':isHidden}"
    @dblclick.prevent.stop
    @click.prevent.stop
  >
    <div
      class="app-wrapper-header"
      :class="{'move':isMove}"
      @mousedown.prevent.stop ="onMove"
    >
      <div class="app-wrapper-header-left">
        <img draggable="false" :src="icon" :alt="name" class="app-wrapper-header-left-icon">
        <span class="app-wrapper-header-left-label">{{name}}</span>
      </div>

      <div class="app-wrapper-header-center">
        {{title}}
      </div>

      <div class="app-wrapper-header-right" @mousedown.prevent.stop>
        <span class="app-wrapper-header-right-item shrink" @click="onToggleVisibility">
          <i class="iconfont icon-suoxiao"></i>
        </span>
        <span class="app-wrapper-header-right-item magnify" @click="onMagnify">
          <i class="iconfont icon-fangda"></i>
        </span>
        <span class="app-wrapper-header-right-item close" @click="onClose">
          <i class="iconfont icon-guanbi"></i>
        </span>
      </div>
    </div>
    <div class="app-wrapper-body">
      <slot></slot>
    </div>
  </div>
</template>

<script>
  export default {
    name: "AppWrapper",
    props:{
      id:{
        type:String,
        required:true
      },
      icon:{
        type:String,
        required:true
      },
      name:{
        type:String,
        required:true
      },
      title:{
        type:String,
      }
    },
    data(){
      return{
        isMove:false,
        isHidden:false
      }
    },
    methods:{
      // 移动
      onMove(event){
        this.isMove = true
        //计算鼠标按下时，鼠标位于相对于轴的位置
        let diffX = event.clientX - this.$el.offsetLeft;
        //计算鼠标按下时，鼠标位于相对于Y轴的位置
        let diffY = event.clientY - this.$el.offsetTop;
        document.onmousemove=(event)=>{
          event.preventDefault();
          event.stopPropagation();
          //计算出鼠标在X、Y轴上移动的距离，即为移动的距离
          let moveLeft = event.clientX - diffX;
          let moveTop = event.clientY - diffY;
          //当播放器水平向左移动超过屏幕外150px后，停止移动
          if (moveLeft < 0) {
            moveLeft = 0;
          }
          //当播放器水平向右移动超过屏幕外150px后，停止移动
          // else if (moveLeft > window.innerWidth-temp.offsetWidth) {
          //   moveLeft = window.innerWidth - temp.offsetWidth;
          // }
          //当播放器移动屏幕顶部后，停止移动
          if (moveTop < 0) {
            moveTop = 0;
          }
          //当播放器移动屏幕底部时，当播放器顶部距离底部80px时停止移动
          if (moveTop > window.clientHeight +40) {
            moveTop = window.innerHeight +40;
          }
          //赋值给样式，实现移动效果
          this.$el.style.left = moveLeft + "px";
          this.$el.style.top = moveTop + "px";
        }
        document.onmouseup = (e)=>{
          e.preventDefault();
          e.stopPropagation();
          this.isMove = false
          document.onmousemove=null;
          document.onmouseup=null;
        }
      },
      onToggleVisibility(e){
        this.isHidden = !this.isHidden
      },

      onMagnify(e){

      },
      onClose(e){
        this.$store.commit('app/CLOSE_APP',this.id)
      }
    }
  }
</script>

<style lang="scss">
  $app-wrapper-background-color:#fbfbfb;
  .app-wrapper{
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%,-50%);
    z-index: 50;
    /*min-width: 600px;*/
    /*min-height: 700px;*/
    border-radius: 6px;
    background-color: $app-wrapper-background-color;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    .move{
      cursor: move;
    }
    &.hidden{
      visibility: hidden;
    }
    &-header{
      height: 29px;
      display: flex;
      justify-content: space-between;
      user-select: none;
      position: relative;
      &-left{
        margin-left: 6px;
        display: flex;
        align-items: center;
        &-icon{
          width: 20px;
          height: 20px;
          user-select: none;
        }
        &-label{
          margin-left: 12px;
          font-size: 14px;
          font-family: "Microsoft YaHei UI",Avenir, Helvetica, Arial, sans-serif;
        }
      }
      &-center{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%,-50%);
        font-size: 14px;
        font-family: "Microsoft YaHei UI",Avenir, Helvetica, Arial, sans-serif;
      }
      &-right{
        width: 135px;
        display: flex;
        &-item{
          flex: 1;
          display: flex;
          justify-content: center;
          align-items: center;
          font-size: 12px;
          color: #b2b2b2;
          font-weight: 800;
          &.magnify:hover,&.shrink:hover{
            background: #dddeee;
            color: #000000;
          }
          &.close:hover{
            background: #e95420;
            color: #000000;
          }
        }
      }
    }
    &-body{
      flex: 1;
      /*background: aqua;*/
    }
  }
</style>